<!--
 * @Author: hrg
 * @Date: 2023-04-10 20:43:49
 * @LastEditTime: 2023-06-29 17:25:42
 * @FilePath: \study_-vuejs\dome\study_vue_demo\index.html
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>learn vue</title>
  <script src="./vue.js"></script>
</head>

<body>


  <div id="root">
    <h1>列表过滤</h1>
    <input type="text" v-model="keyword" placeholder="请输入关键词">
    <button @click="sortid= 2">年龄升序</button>
    <button @click="sortid= 1">年龄降序</button>
    <button @click="sortid= 0">原顺序</button>
    <ul>
      <li  v-for="item in filtpersons" :key="item.id">{{item.name}}-{{item.sex}}-{{item.age}}</li>
    </ul>
  </div>
  <script>
    Vue.config.productionTip = false

    // 通过监听属性进行的过滤
    // const vue = new Vue({

    //   el: '#root', // 指定容器
    //   data: {  // 存储数据，供容器使用。
    //     keyword: '',
    //     persons: [
    //       { id: 1, name: '马冬梅', sex: '女', age: 18 },
    //       { id: 2, name: '周冬雨', sex: '女', age: 19 },
    //       { id: 3, name: '周杰伦', sex: '男', age: 20 },
    //       { id: 4, name: '温兆伦', sex: '男', age: 21 }
    //     ],
    //     filpersons: [],
    //   },
    //   methods: {
    //     gg: function () {
    //       console.log('fghjkl');
    //     }
    //   },
    //   watch: {
    //     keyword: {
    //       immediate: true,
    //       handler(a) {
    //         this.filpersons = this.persons.filter((i) => {
    //           return i.name.indexOf(a) > -1;
    //         })
    //       }
    //     }
    //   }
    // });

    // 通过计算属性进行的过滤
    const vm = new Vue({
      el: '#root',
      data: {
        keyword: '',
        sortid: 0,
        persons: [
          { id: 1, name: '马冬梅', sex: '女', age: 18 },
          { id: 2, name: '周冬雨', sex: '女', age: 19 },
          { id: 3, name: '周杰伦', sex: '男', age: 22 },
          { id: 4, name: '温兆伦', sex: '男', age: 21 }
        ],
      },
      computed: {
        filtpersons() {
          const arr = this.persons.filter((i) => {
            return i.name.indexOf(this.keyword) > -1;
          });
          if (this.sortid) {
            arr.sort((a, b) => {
              return this.sortid == 2 ? a.age - b.age : b.age - a.age
            })
          }
          return arr
        }

      }
    });

  </script>

</body>

</html>